<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      width: 80%;
      margin: 20px auto;
    }

    .img_wrap {
      width: 600px;
      display: flex;
      justify-content: space-around;
    }

    .img_wrap img {
      width: 100px;
      height: 100px;
    }

    .img_wrap .active {
      border: 2px solid red;
      box-sizing: border-box;
    }

    .msg_list {
      width: 100%;
      /* height: 500px; */
      background: #f7f7f7;
      /* overflow: auto; */
    }

    .msg_list .msg_one {
      width: 100%;
      height: 250px;
      padding: 20px 20px;
      box-sizing: border-box;
      border-bottom: 1px dotted red;
    }

    .msg_list .msg_one img {
      width: 80px;
      height: 80px;
      margin: 20px 30px;
    }

    .msg_list .msg_one button {
      width: 100px;
    }

    .send_content {
      margin: 20px 0;
      /* margin: 20px auto; */
    }



    .send_content input {
      width: 450px;
      height: 60px;
      line-height: 60px;
      font-size: 30px;
    }

    .send_content button {
      width: 100px;
      height: 60px;
    }
  </style>
</head>

<body>
  <div class="wrap">
    选择头像：<div class="img_wrap">
      <img class="active" src="./images/dn1.jpg">
      <img src="./images/dn2.jpg">
      <img src="./images/dn3.jpg">
      <img src="./images/dn4.jpg">
      <img src="./images/dn5.jpg">
    </div>
    <!-- 留言部分 -->
    <div class="send_content">
      昵称：<input type="text" id="nickname">
      留言内容：<input type="text" id="msg">
      <button id="send">发送</button>
    </div>
    <!-- 内容部分 -->
    <div class="msg_list">
      <!-- <div class="msg_one">
        <div>
          <img src="" alt=""> <span>昵称</span>
        </div>
        <div>留言内容</div>
        <div><span>2021年5月17日15:01:02</span></div>
        <div>
          <button>赞(<span>0</span>)</button> <button>踩(<span>0</span>)</button> <button>删除</button>
        </div>
      </div> -->
    </div>
  </div>

  </div>
  <script src="./javascripts/jquery-3.4.1.min.js"></script>
  <script>
    // 图片切换样式
    $(".img_wrap img").click(function () {
      $(this).addClass("active").siblings().removeClass("active");
    })
    $("#send").click(function () {
      if ($("#msg").val() && $("#nickname").val()) {
        $.ajax({
          url: "http://127.0.0.1:3000/users/add",
          type: "post",
          data: {
            nickname: $("#nickname").val(),
            msg: $("#msg").val(),
            imgsrc: $(".active").attr("src")
          },
          success: function (res) {
            console.log(res)
            $("#nickname").val("")
            $("#msg").val("")
            show()
          }
        })
      } else {
        alert("请补全信息")
      }
    })
    // 
    function show() {
      $.ajax({
        url: "http://127.0.0.1:3000/users/all",
        type: "post",
        success: function (res) {
          console.log(res)
          var str = ``;
          $.each(res, function (index, ele) {
            str += `  <div class="msg_one">
                <div>
                  <img src="${ele.imgsrc}" alt=""> <span>${ele.nickname}</span>
                </div>
                <div>${ele.msg}</div>
                <div><span>${ele.date}</span></div>
                <div lid="${ele._id}">
                  <button class="zan"  onclick="zanAndCai('${ele._id}','zan',this)">赞(<span>${ele.zan}</span>)</button> <button class="cai" onclick="zanAndCai('${ele._id}','cai',this)">踩(<span>${ele.cai}</span>)</button> <button onclick="del('${ele._id}')">删除</button>
                </div>
              </div>`
          })
          $(".msg_list").html(str);
        }
      })
    }
    show()
    // 删除接口
    function del(id) {
      $.ajax({
        url: "http://127.0.0.1:3000/users/del",
        type: "post",
        data: {
          id: id
        },
        success: function (res) {
          show();
        }
      })
    }

    // 赞和踩
    function zanAndCai(id, status, that) {
      // status zan 或cai 
      var data = {
        action: status, //传送赞和踩的状态
        id: id
      }
      if (status == "zan") {
        data.zan = ++that.firstElementChild.innerHTML;  //赋值赞的数量
      }
      if (status == "cai") {
        data.cai = ++that.firstElementChild.innerHTML; //赋值踩的数量
      }
      $.ajax({
        url: "http://127.0.0.1:3000/users/zanAndCai",
        type: "post",
        data: data,
        success: function (res) {
          console.log(res)
          alert(res.success)
          show();
        }
      })
    }

  </script>

</body>

</html>